<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>熙心健康体检系统 - 体检预约</title>
  <style>
    /* 全局重置与基础样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }

    body {
      background-color: #f5f7fa;
    }

    /* 布局容器 */
    .container {
      display: flex;
      height: 100vh;
    }

    /* 侧边栏 */
    .sidebar {
      width: 220px;
      background-color: #2f3b4b;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20px 0;
    }

    .sidebar-header {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .sidebar-nav {
      list-style: none;
    }

    .sidebar-nav li {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .sidebar-nav li:hover {
      background-color: #3c4b5e;
    }

    .sidebar-nav li.active {
      background-color: #4a5b70;
    }

    /* 主内容区 */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* 顶部栏 */
    .topbar {
      height: 50px;
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .topbar .user-info {
      color: #333;
      margin-right: 20px;
    }

    .topbar .logout-btn {
      color: #ff4d4f;
      cursor: pointer;
    }

    /* 内容区 */
    .content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }

    /* 选项卡 */
    .tab-nav {
      display: flex;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 20px;
    }

    .tab-nav li {
      list-style: none;
      padding: 10px 20px;
      margin-right: 10px;
      cursor: pointer;
      color: #333;
      border: 1px solid transparent;
      border-bottom: none;
      transition: all 0.3s;
    }

    .tab-nav li.active {
      border: 1px solid #e8e8e8;
      border-bottom: 1px solid #fff;
      background-color: #fff;
      position: relative;
      bottom: -1px;
    }

    /* 表单区域 */
    .form-section {
      background-color: #fff;
      padding: 20px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .form-section h3 {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10px;
      margin-bottom: 15px;
    }

    .form-col {
      flex: 1;
      min-width: 200px;
      padding: 0 10px;
      margin-bottom: 10px;
    }

    .form-col label {
      display: block;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    .form-col input,
    .form-col select,
    .form-col textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
    }

    .form-col textarea {
      resize: vertical;
      min-height: 80px;
    }

    /* 表格样式 */
    .table-section {
      background-color: #fff;
      padding: 20px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
    }

    .table-section table {
      width: 100%;
      border-collapse: collapse;
    }

    .table-section th,
    .table-section td {
      border: 1px solid #e8e8e8;
      padding: 8px 10px;
      text-align: left;
      font-size: 14px;
      color: #666;
    }

    .table-section th {
      background-color: #fafafa;
      font-weight: bold;
    }

    /* 按钮（示例，可根据实际需求加） */
    .submit-btn {
      padding: 8px 20px;
      background-color: #1890ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-header">熙心健康体检系统</div>
      <ul class="sidebar-nav">
        <li onclick="window.location.href='shouye.html'">首页</li>
        <li class="active" onclick="window.location.href='tijian.html'">体检预约</li>
        <li onclick="window.location.href='yuyue.html'">预约列表</li>
        <li onclick="window.location.href='chaxun.html'">体检客户查询</li>
      </ul>
    </aside>

    <!-- 主内容 -->
    <div class="main">
      <!-- 顶部栏 -->
      <div class="topbar">
        <div class="user-info">系统管理员：admin</div>
        <div class="logout-btn" onclick="window.location.href='admin.html'">退出</div>
      </div>

      <!-- 内容区 -->
      <div class="content">
        <!-- 选项卡 -->
        <ul class="tab-nav">
          <li class="active">预约</li>
          <li>查询</li>
        </ul>

        <!-- 基本信息表单 -->
        <div class="form-section">
          <h3>基本信息</h3>
          <div class="form-row">
            <div class="form-col">
              <label>体检编号</label>
              <input type="text" placeholder="2023100800023125" />
            </div>
            <div class="form-col">
              <label>姓名</label>
              <input type="text" placeholder="输入姓名" />
            </div>
            <div class="form-col">
              <label>性别</label>
              <select>
                <option>请选择性别</option>
                <option>男</option>
                <option>女</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-col">
              <label>手机号码</label>
              <input type="text" placeholder="输入手机号码" />
            </div>
            <div class="form-col">
              <label>出生日期</label>
              <input type="date" />
            </div>
            <div class="form-col">
              <label>身份证号</label>
              <input type="text" placeholder="输入身份证号码" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-col">
              <label>家庭住址</label>
              <input type="text" placeholder="输入通讯地址" />
            </div>
          </div>
        </div>

        <!-- 预约信息表单 -->
        <div class="form-section">
          <h3>预约信息</h3>
          <div class="form-row">
            <div class="form-col">
              <label>预约院区</label>
              <select>
                <option>选择院区地址</option>
                <option>浑南店</option>
                <option>沈河店</option>
              </select>
            </div>
            <div class="form-col">
              <label>院区描述</label>
              <textarea
                placeholder="营业时间：周一至周六 7:30-11:30
采集截止：10:30
联系电话：4006209268
地址：沈阳市浑南新区天赐街15号（浦江苑五经里）"
              ></textarea>
            </div>
          </div>
        </div>

        <!-- 预约详情表单 -->
        <div class="form-section">
          <h3>预约详情</h3>
          <div class="form-row">
            <div class="form-col">
              <label>预约类型</label>
              <select>
                <option>预约类型</option>
                <option>类型1</option>
                <option>类型2</option>
              </select>
            </div>
            <div class="form-col">
              <label>预约套餐</label>
              <select>
                <option>预约套餐</option>
                <option>套餐A</option>
                <option>套餐B</option>
              </select>
            </div>
            <div class="form-col">
              <label>体检时间</label>
              <input type="date" />
            </div>
            <div class="form-col">
              <label>体检时段</label>
              <select>
                <option>体检时段</option>
                <option>上午</option>
                <option>下午</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-col">
              <label>套餐价格</label>
              <input type="text" placeholder="1500" />
            </div>
            <div class="form-col">
              <label>优惠补贴</label>
              <input type="text" placeholder="400" />
            </div>
            <div class="form-col">
              <label>人员金额</label>
              <input type="text" placeholder="1100" />
            </div>
            <div class="form-col">
              <label>消费类别</label>
              <select>
                <option>请选择</option>
                <option>类别1</option>
                <option>类别2</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 套餐详情表格 -->
        <div class="table-section">
          <table>
            <thead>
              <tr>
                <th>检查项目</th>
                <th>检查内容</th>
                <th>检查意义</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>胸部CT</td>
                <td>CT检查【肺部+平扫】</td>
                <td>用于检查肺部有无炎性病变、结核、良恶性肿瘤，弥漫性病变等。</td>
              </tr>
              <tr>
                <td>头部CT</td>
                <td>头部CT</td>
                <td>CT检查头部病变</td>
              </tr>
              <tr>
                <td>肝胆脾胰</td>
                <td>肝胆脾胰彩超（空腹、需憋尿）</td>
                <td>适应征：用于诊断肝胆脾胰疾病，对肿瘤、腹部包块的诊断，疗效观察和预后评估有重要的临床意义，对黄疸、腹痛等症状的诊断、鉴别诊断有重要价值，肝硬化等慢性肝病有重要诊断、鉴别诊断及并发症。</td>
              </tr>
              <tr>
                <td>C13呼气试验</td>
                <td>C13呼气试验</td>
                <td>检测，一个用以检测幽门螺旋杆菌感染的呼气试验检查，13C尿素呼气试验的适用有幽门螺旋杆菌感染，它与胃炎、消化性溃疡、胃癌的发生均相关联。</td>
              </tr>
              <tr>
                <td>甲功三项</td>
                <td>血清游离甲状腺素测定</td>
                <td>判断甲状腺功能，鉴别免疫性疾病</td>
              </tr>
              <tr>
                <td>颈部动脉彩超</td>
                <td>彩色多普勒超声检查【双侧】</td>
                <td>通过对颈部动脉的观察及测量的检查方法，检查颈部动脉结构和动脉硬化斑形成、狭窄、闭塞、动脉瘤等病变；早期发现动脉硬化病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据。</td>
              </tr>
              <!-- 可继续添加更多行 -->
            </tbody>
          </table>
        </div>

        <!-- 提交按钮（示例） -->
        <button class="submit-btn">提交预约</button>
      </div>
    </div>
  </div>
</body>

</html>